<template>
	<view calss="box">
		<view class="banner">
			<!-- 活动图片 -->
			<image class="banner-img" :src="banner.cover" :lazy-load="true"></image>
			<view class="banner-title">{{banner.title}}</view>
		</view>
		<view class="article-meta total">
			<u--text text='活动内容:' size='20' margin='10'></u--text>
			<u-line></u-line>
			<view class="event_details">
				<!-- 内容-->
				<u--text :lineHeight="25" :text="Text" user-select></u--text>
				<!-- <u--text text="分享到微信" openType="share" type="success" @click="clickHandler"></u--text> -->
			</view>

		</view>
		<!-- 活动时间 -->
		<view class="activity_time total">
			<text>活动开始时间：{{banner.start_time}}</text>
			<u-line></u-line>
			<text>活动结束时间：{{banner.start_time}}</text>
			<u-line></u-line>
			<text>地　　　　点：ｘｘｘｘｘｘｘｘｘ</text>
		</view>
		<!-- 参与人数 -->
		<view class="number_participants total">
			<view class="number">
				<text>参与人数:</text>
				<u-badge :type="type" max="99" :value="value"></u-badge>
			</view>
			<view class="avatars">
				<u-avatar-group :urls="ImageUrl" size="35" gap="0.4"></u-avatar-group>
			</view>
		</view>
		<!-- 参与按钮 -->
		<view class="participate total">
			<!-- 弹出确认参与提示框 -->
			<u-modal :show="show" @confirm="confirm" @cancel="cancel" showCancelButton="true" ref="uModal" :asyncClose="true">
				<u--text text="确认参与本活动吗？"></u--text>
			</u-modal>
			<u-button type="primary" shape="circle" @click="showModal" text="参加活动" v-if="index==0"></u-button>
			<u-button type="red" shape="circle" text="取消参加" v-else></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				index: 0,
				banner: [],
				Text: '　　随着社会与经济快速的发展，生活水平和物质享受不断提高。同时，生活与工作的压力也越来越大，无论是年轻一代还是中年人士都在为了生活而忙碌。在这样一个竞争强烈的社会环境里，使一些年轻人和一些忙于事业的人士将自己的终身大事放在了事业与工作的后面。导致了大龄未婚人数不断上升。根据事实来看，过去年轻人结婚平均年龄在18——24岁，而现在是27——35岁。这样一来，很多人在忙于工作事业的时候将私人的事情耽误了，最终由于紧张的工作环境和事业的压力就更加没有足够的时间去谈情说爱了。资料：新中国成立以来出现了两次大龄青年的单身危机，第一次是在1950年至1953年左右，主要特点是男性“困难户”居多，当时政府的解决方式是用组织手段和领导介绍。第二次是在70年代至85年左右，当时是受知青返城等因素造成的是女性受害者居多，解决方式是领导和单位介绍和指导。',
				type: "warning",
				value: 100,
				ImageUrl: [
					'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg',
					'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215735941.jpg',
					'https://p.qqan.com/up/2020-7/2020070908330717953.jpg',
					'https://tupian.qqw21.com/article/UploadPic/2019-1/201912319273090791.jpg'
				],
				show: false,
			}
		},
		onLoad(event) {

			this.banner = JSON.parse(decodeURIComponent(event.detailDate));
			//详情标题
			console.log(this.banner);
			uni.setNavigationBarTitle({
				title: this.banner.title
			});
		},
		methods: {
			// clickHandler() {//分享按钮
			// 	// #ifndef MP-WEIXIN
			// 	uni.$u.toast('请在微信小程序内查看效果')
			// 	// #endif
			// },
			showModal() {//打开模态框
				this.show = true;
			},
			confirm() {//异步模态框确认
				setTimeout(() => {
					// 3秒后自动关闭
					this.show = false;
				}, 3000)
			},
			cancel(){//异步模态框取消
				this.show = false;
			}
		}
	}
</script>
<style scoped lang="less">
	.total {
		margin: 20rpx 10rpx;
		padding: 10rpx 10rpx;
		overflow: hidden;
		border-radius: 3%;
		background-color: #ffffff;
	}

	.banner {
		height: 360upx;
		margin: 12rpx 10rpx;
		overflow: hidden;
		position: relative;
		border-radius: 3%;
		background-color: #ffffff;

		.banner-img {
			width: 100%;

		}
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {

		.event_details {
			margin-top: 10rpx;
		}
	}

	.activity_time {}

	.number_participants {
		.number {
			display: flex;
			align-items: center;
		}
	}
</style>
